<template>
    <div>
        <div style="display: flex;flex-direction: row;justify-content: center">
            <el-input v-model="inputInfo" clearable style="width: 200px;margin-right: 10px" type="text"></el-input>
            <el-button icon="el-icon-search" size="medium" style="margin-left: 10px"
                       type="success" @click="handleReportSearch">搜索
            </el-button>
        </div>
        <div style="display: flex;align-items: center;flex-direction: column;margin-left: -25px">
            <el-table :key="centerDialogVisible"
                      :data="reports"
                      stripe
                      style="width: 90%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form class="demo-table-expand" inline label-position="left">
                            <el-form-item class="process-steps">
                                <el-table :data="props.row.nearestLocation.content" stripe style="width: 100%">
                                    <el-table-column label="物资名称" prop="label" width="100px"></el-table-column>
                                    <el-table-column label="剩余数量" prop="amount" width="100px"></el-table-column>
                                    <el-table-column label="操作">
                                        <template slot-scope="scope">
                                            <div class="scopeTemplate">
                                                <el-slider
                                                    v-model="scope.row.deliver"
                                                    :max="scope.row.amount"
                                                    :step="10"
                                                    show-stops>
                                                </el-slider>
                                                <el-button
                                                    size="mini"
                                                    @click="handleDeliver(scope.$index, scope.row)">分派
                                                </el-button>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-form-item>
                            <el-form-item>
                                <el-transfer v-model="transferArray"
                                             :data="props.row.nearestLocation.people"></el-transfer>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="ID" prop="id" width="50px"></el-table-column>
                <el-table-column label="接报编码" prop="code" width="100px"></el-table-column>
                <el-table-column label="接报名称" prop="name"></el-table-column>
                <el-table-column label="预备流程" prop="process"></el-table-column>
                <el-table-column label="企业" prop="enterprise"></el-table-column>
                <el-table-column label="处理人" prop="lastHandlePerson"></el-table-column>
                <el-table-column label="处理时间" prop="lastHandleTime"></el-table-column>
                <el-table-column label="最近物资点" prop="location"></el-table-column>
                <el-table-column label="接报状态" prop="reportStatus">
                    <template slot-scope="scope">
                        <el-badge is-dot>{{ scope.row.reportStatus }}</el-badge>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                :page-size="2"
                :total="paginationTotal"
                background
                layout="prev, pager, next"
                style="margin-top: 5px">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import variables from "@/assets/variables";

export default {
    name: "EmergencyManagement",
    data() {
        return {
            userName: "",
            reports: [],
            processOptions: [],
            enterpriseOptions: [],
            title: "",
            inputInfo: "",
            centerDialogVisible: false,
            selectedReport: {},
            selectedReportIndex: -1,
            oldReports: [],
            transferArray: [],
        }
    },
    methods: {
        getTimeString() {
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth();
            const day = now.getDate();
            return year + "-" + month + "-" + day;
        },
        handleReportSearch() {
            if (this.inputInfo === "") {
                this.reports = this.oldReports;
            } else {
                this.reports = this.oldReports.filter(report =>
                    report.name.includes(this.inputInfo) ||
                    report.code.includes(this.inputInfo) ||
                    report.process.includes(this.inputInfo) ||
                    report.reportPerson.includes(this.inputInfo) ||
                    report.personPhone.includes(this.inputInfo) ||
                    report.creator.includes(this.inputInfo) ||
                    report.enterprise.includes(this.inputInfo) ||
                    report.lastHandlePerson.includes(this.inputInfo) ||
                    report.lastHandleTime.includes(this.inputInfo)
                );
            }
        },
        handleEdit(index, obj) {
            this.title = "修改";
            this.centerDialogVisible = true;
            this.selectedReportIndex = index;
            this.selectedReport = JSON.parse(JSON.stringify(obj));
        },
        handleDelete(index, row) {
            if (row.reportStatus === "进行中") {
                this.$message({
                    type: "error",
                    message: "进行中的接报无法删除",
                })
            } else {
                this.reports.splice(index, 1);
                this.$message({
                    type: "success",
                    message: "删除成功",
                })
            }
        },
        handleDialogEnter() {
            const process = variables.processes;
            if (this.selectedReport.process !== undefined) {
                for (let j in process) {
                    if (this.selectedReport.process === process[j].type) {
                        console.log("==");
                        this.selectedReport.steps = process[j].steps;
                        this.selectedReport.stepsLength = this.selectedReport.steps.length;
                        break;
                    }
                }
            }
            if (this.title === "新增") {
                this.reports.push(this.selectedReport);
            } else {
                this.reports[this.selectedReportIndex] = this.selectedReport;
            }
            this.centerDialogVisible = false;
        },
        handleProcessChange(v) {
            this.selectedReport.process = v.join("/");
        },
        handleNextSteps(v) {
            v.stepActive++;
            if (v.stepActive===v.stepsLength) {
                v.reportStatus = "已完成";
                this.$message({
                    type: "success",
                    message: "该接报已完成"
                })
            }
        },
        handleDeliver(index,row) {
            console.log(index,row);
            row.amount -= row.deliver;
            row.deliver = 0;
        }
    },
    computed: {
        paginationTotal() {
            return this.reports.length;
        }
    },
    mounted() {
        this.userName = this.$route.params.name
        let cities = variables.cities;
        this.reports = variables.reportsS;
        this.processOptions = variables.reportProcess;
        this.enterpriseOptions = variables.enterprises;
        for (let i in this.reports) {
            let report = this.reports[i];
            if (report.reportStatus==="进行中") {
                report.processT = report.process.split("/");
                report.cities = cities;
            }else {
                delete (this.reports[i])
            }
        }
    },
}
</script>

<style scoped>
.selectedReportForm {
    height: 300px;
}

.selectedReportForm >>> .el-form-item {
    display: inline-block;
    width: 260px;
    float: left;
    margin: 5px 15px;
}

.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}

.process-steps >>> .el-form-item__content {
    width: 100%;
}

.scopeTemplate {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.scopeTemplate >>> .el-slider__runway {
    width: 250px;
}

.el-transfer {
    margin-left: 30px;
    display: flex;
    width: 550px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.el-transfer >>> button {
    margin: 20px -10px
}
</style>